<!-- map -->
<template>
  <div class="map-box" id="mapBox">
    <div class="loading" style="color: #fff" v-show="ok">
      <dv-loading style="color: #000">数据加载中...</dv-loading>
    </div>
    <div id="lygMap"></div>
    <!-- <div class="test1" @click="test1">测试</div> -->
  </div>
</template>

<script>
import maps from "../../assets/js/map";
let BM;

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      ok: true,
      map: null,
      center: ["34.602267", "119.198145"],
      points: [],
      zoom: 10,
    };
  },
  props: {
    targetCenter: null,
    pointArr: Array,
    recZoom: null,
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    pointArr: {
      handler(n, o) {
        console.log("------传入的大头针数据有变化-------");
        this.setPoint();
      },
    },
  },
  // 方法集合
  methods: {
    initMap() {
      var that = this;
      maps.then(() => {
        // console.log(this.map);
        BM = window.BM;
        BM.Config.HTTP_URL = "http://218.92.114.38:9000";
        this.map = BM.map("lygMap", "bigemap.05jg7hv6", {
          // center: [34.56126022338867, 119.15752410888672],
          // 119.228145,34.602267
          center: this.targetCenter || ["34.602267", "119.198145"],
          zoom: that.recZoom || 10,
          zoomControl: true,
          attributionControl: false,
        });

        this.map.setMaxBounds([
          [35.155, 118.267],
          [33.811, 120.311],
        ]);
        // console.log(this.map)

        // 判断是否为应急指挥用地图
        if (this.recZoom != null) {
          console.log("有缩放");
          this.setIndexPoint();
        }

        this.setPoint();

        this.map.on("click", function (e) {
          console.log(e);
        });

        this.ok = false;
      });
    },
    // 单点
    setIndexPoint() {
      let myIcon = BM.icon({
        iconUrl:
          "./mark/warning.png",
          iconSize: [70, 70],
          // iconAnchor: [50, 50],
      });
      // let po = this.targetCenter || [119.228145,34.602267]
      let marker = BM.marker(["34.602267", "119.198145"], { icon: myIcon }).addTo(this.map);
      marker
        .bindPopup(
          "<p>test000</p @click='test1'>"
        )
        .addTo(this.map);
      marker.bindTooltip("<p style='font-size: 0.18rem;'>单位</p>");
    },
    // 多点
    setPoint() {
      this.points.forEach((e) => {
        e.remove();
      });
      if (
        this.pointArr == null ||
        this.pointArr == undefined ||
        this.pointArr.length < 1
      )
        return;
      console.log("设置大头针开始");
      console.log(this.pointArr);
      // 坐标
      for (let i = 0; i < this.pointArr.length; i++) {
        console.log(this.pointArr);
        let p = this.pointArr[i];
        let myIcon = BM.icon({
          // iconUrl: './mark/mark'+ p.icon +'.png',
          iconUrl:
            "http://139.196.105.243:8089/profile/mark/mark/mark" +
            p.icon +
            ".png",
          // iconUrl: 'https://ae01.alicdn.com/kf/Hcb7973fd20884f9dbdd68e39e0262a96o.png',
          // https://ae01.alicdn.com/kf/Hcb7973fd20884f9dbdd68e39e0262a96o.png
        });
        let marker = BM.marker(p.center, { icon: myIcon }).addTo(this.map);
        marker
          .bindPopup(
            "<p>" + p.name + "</p @click='test1'><button> 详情 </button>"
          )
          .addTo(this.map);
        marker.bindTooltip("<p style='font-size: 0.18rem;'>" + p.name + "</p>");
        this.points.push(marker);
      }
    },
    test1() {
      console.log("test111111");
    },
    resetBox() {
      let box = document.getElementById("lygMap");
      let mapBox = document.getElementById("mapBox");
      console.log(mapBox);
      if (box) {
        box.remove();
      }
      let box1 = document.createElement("div");
      box1.id = "lygMap";
      box1.style.width = "100%";
      box1.style.height = "100%";
      box1.style.zIndex = 0;
      mapBox.appendChild(box1);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (
      JSON.stringify(this.targetCenter) == "[]" ||
      this.targetCenter == undefined ||
      this.targetCenter.length == 0 ||
      this.targetCenter == null
    ) {
      return console.log("没接收到坐标数据");
    } else {
      console.log("传了坐标");
    }
    this.center = this.targetCenter;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initMap();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    // console.log(demo1)
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    // console.log("开始销毁页面")
    // this.map.remove()
    // console.log(this.map)
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.map-box {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;
  #lygMap {
    width: 100%;
    height: 100%;
    // background-color: rgba(0, 0, 0, 0.1);
    // transition: all 0.4s;
  }
  .loading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 0;
  }
  .test1 {
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 0.2rem;
    color: #f00;
    z-index: 99;
  }
}
</style>